<template>
	<div class="userDistribution flex scrollbar" v-if="total_channel && total_channel.length > 0">
		<div class="_item" v-for="(item) in total_channel">
			<h3>{{ item.title }}</h3>
			<div class="num flex">
				<div class="_left flex">
					<b>{{ item.num }}</b>
					<span>{{ unit }}</span>
				</div>
				<div class="_right">
					<span>{{ item.percent }}</span>
					<b>占比</b>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props:{
			
			// 数据
			total_channel: {
				type: Array,
				defalut: [],
			},
			
			// 单位
			unit: {
				type: String,
				defalut: "人"
			},
			
		},
		data() {
			return {
				
			};
		},
		methods: {
			
		},
	};
</script>

<style lang="scss" scoped>
	.userDistribution{
		flex-direction: row;
		overflow-x: auto;
		padding-bottom: 7px;
		margin-bottom: 7px;
		._item {
			flex-shrink: 0;
			width: 220px;
			background: #FFF;
			padding-bottom: 15px;
			margin-right: 15px;
			border-radius: 12px;
			overflow: hidden;
			// border:1px solid #ececec;
			h3 {
				padding: 15px 18px 0 18px;
				color: #7e7e9b;
				font-size: 15px;
				font-weight: normal;
				line-height: 25px;
			}
			.num {
				padding: 0 18px;
				margin-top: 5px;
				flex-direction: row;
				justify-content: space-between;
				._left {
					flex-direction: row;
					align-items: center;
					b {
						color: #000;
						font-size: 20px;
					}
					span {
						color: #7e7e9b;
						margin-left: 15px;
					}
				}
				._right {
					text-align: right;
					span {
						font-size: 13px;
						display: block;
						line-height: 20px;
						color: #666;
					}
					b {
						font-weight: normal;
						font-size: 11px;
						color: #999;
						display: block;
						line-height: 20px;
					}
				}
			}
		}
	}
</style>